<template>
  <div class="app-container" style="padding: 5px;">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px" label-position="right">
      <el-form-item label="查询方式" prop="qMode">
        <el-select v-model="queryParams.qMode" filterable style="width:150px;" @change="changeDictData">
            <el-option
            v-for="item in modeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年份" prop="year" v-if="queryParams.qMode!='yy'">
        <el-select v-model="queryParams.year" filterable style="width:150px;" @change="changeDictData">
            <el-option
            v-for="item in yearList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
      </el-form-item>
      <el-card>
        <div ref="chart1" style="width: 100%; height: 500px;"></div>
      </el-card>
      <el-card style="margin-top: 5px;">
        <div ref="chart2" style="width: 100%; height: 500px;"></div>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import { listScbSdsjDbDicts,listScbXsbDbSummary } from "@/api/system/weekly/weeklydashboard";
import * as echarts from 'echarts';
export default {
    name: "Xsbscbdb",
    data() {
        return {
          modeList: [
            {
              value: "yy",
              label: "年",
            },
            {
              value: "ym",
              label: "月",
            },
            {
              value: "wk",
              label: "周",
            },
          ],
          yearList: [],
          queryParams: {
            qMode: null,
            year: null,
          },
        }
    },
    created() {
      this.queryParams.qMode = "ym";
      this.getScbSdsjDbDicts();
    },
    mounted(){
        
    },
    methods: {
      changeDictData(){
        this.getScbSdsjDbDicts();
      },
      getScbSdsjDbDicts(){
        listScbSdsjDbDicts(this.queryParams).then(res =>{
          if(this.queryParams.qMode!="yy"){
            this.yearList = res.data.years;
            this.queryParams.year = res.data.year;
          }
          this.getScbXsbDbSummary();
        })
      },
      getScbXsbDbSummary(){
        listScbXsbDbSummary(this.queryParams).then(res =>{
          console.log("----------------------------->",res.data)
          let labels1 = [];
          if(res.data.fee.length>0){
            for(let i=0;i<res.data.fee.length;i++){
              labels1.push(res.data.fee[i].rq);
            }
          }
          let barWidth = 0;
          if(this.queryParams.qMode=="yy"){
            barWidth = 50;
          }else if(this.queryParams.qMode=="ym"){
            barWidth = 40;
          }else if(this.queryParams.qMode=="wk"){
            barWidth = 25;
          }
          const chart1 = echarts.init(this.$refs.chart1);
          const chart2 = echarts.init(this.$refs.chart2);
          const option1 = {
            title: {
                text: '市场部销售部转化首单金额对比',
                textStyle: {
                    fontSize: 14, // 设置标题字体大小
                    fontWeight: 'bold', // 设置字体粗细
                    color:'#0099ff'
                },
                left: 'center'
            },
            tooltip: { 
              trigger: 'axis',
              formatter: function (params) {
                return params[0].data.extraInfo
              }
            },
            legend: { 
              data: ['市场部首次签单金额', '销售部首次签单金额',  '市场部占比'],
              bottom: 10,
              left: 'center'
            },
            grid: [
              { top: '6%',left:10,right:10,  height: '65%' },  // 柱图
              { top: '60%',left:10,right:10, height: '35%'}   // 折线
            ],
            toolbox: {
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            xAxis: [
              { 
                type: 'category', 
                gridIndex: 0, 
                data: labels1,
                axisLabel: {
                  rotate: 45, // 设置 X 轴文字旋转角度
                  interval: 0, // 强制显示所有标签
                  fontSize: 12, // 文字大小
                  color: '#333' // 文字颜色
                }},
            ],
            yAxis: [
              { type: 'value', gridIndex: 0,axisLabel: { show: false } },
            ],
            series: [
              { 
                name: '市场部首次签单金额', 
                type: 'line', 
                xAxisIndex: 0, 
                yAxisIndex: 0, 
                data: res.data.fee.map(item => ({
                  value: Number(item.scb_price).toFixed(2),
                  name: item.rq,
                  extraInfo:"<span style='color:blue;'>时间: "+item.rq+"<br />"+
                  "市场部金额占比："+Number(Math.abs(item.rate)).toFixed(2)+"%<br />"+
                  "市场部首次签单金额："+Number(item.scb_price).toFixed(2)+"万元<br />"+
                  "销售部首次签单金额："+Number(item.xsb_price).toFixed(2)+"万元</span>",
                })),
                itemStyle: { color: '#5470c6' },
                label: {
                  show: true,
                  position: 'top',        // top / inside / insideTop ...
                  formatter: '{c}万元',       // {c} 即当前值
                  fontSize: 9,
                  color: '#333'
                }
              },
              { 
                name: '销售部首次签单金额', 
                type: 'line', xAxisIndex: 0, 
                yAxisIndex: 0, 
                data: res.data.fee.map(item => ({
                  value: Number(item.xsb_price).toFixed(2),
                  name: item.rq,
                  extraInfo:"<span style='color:blue;'>时间: "+item.rq+"<br />"+
                  "市场部金额占比："+Number(Math.abs(item.rate)).toFixed(2)+"%<br />"+
                  "市场部首次签单金额："+Number(item.scb_price).toFixed(2)+"万元<br />"+
                  "销售部首次签单金额："+Number(item.xsb_price).toFixed(2)+"万元</span>",
                })),
                itemStyle: { color: 'orange' },
                label: {
                  show: true,
                  position: 'top',        // top / inside / insideTop ...
                  formatter: '{c}万元',       // {c} 即当前值
                  fontSize: 9,
                  color: '#333'
                }
              },
              { 
                name: '市场部占比', 
                type: 'bar', 
                xAxisIndex: 0, 
                yAxisIndex: 0, 
                data: res.data.fee.map(item => ({
                  value: item.rate,
                  name: item.rq,
                  extraInfo:"<span style='color:blue;'>时间: "+item.rq+"<br />"+
                  "市场部金额占比："+Number(Math.abs(item.rate)).toFixed(2)+"%<br />"+
                  "市场部首次签单金额："+Number(item.scb_price).toFixed(2)+"万元<br />"+
                  "销售部首次签单金额："+Number(item.xsb_price).toFixed(2)+"万元</span>",
                })),
                itemStyle: { color: '#95AE5B' },
                barWidth: barWidth,
                label: {
                  show: true,
                  position: 'bottom',        // top / inside / insideTop ...
                  formatter: function (params) {
                    // params.value 就是原始值（可能为负）
                    return Math.abs(params.value)+"%";
                  },
                  fontSize: 9,
                  color: '#333'
                }
              }
            ]
          };
          chart1.setOption(option1);

          const option2 = {
            title: {
                text: '市场部销售部转化客户人数对比',
                textStyle: {
                    fontSize: 14, // 设置标题字体大小
                    fontWeight: 'bold', // 设置字体粗细
                    color:'#0099ff'
                },
                left: 'center'
            },
            tooltip: { 
              trigger: 'axis',
              formatter: function (params) {
                return params[0].data.extraInfo
              }
            },
            legend: { 
              data: ['市场部客户数', '销售部客户数',  '市场部客户占比'],
              bottom: 10,
              left: 'center'
            },
            grid: [
              { top: '6%',left:10,right:10,  height: '65%' },  // 柱图
              { top: '60%',left:10,right:10, height: '35%'}   // 折线
            ],
            toolbox: {
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            xAxis: [
              { 
                type: 'category', 
                gridIndex: 0, 
                data: labels1,
                axisLabel: {
                  rotate: 45, // 设置 X 轴文字旋转角度
                  interval: 0, // 强制显示所有标签
                  fontSize: 12, // 文字大小
                  color: '#333' // 文字颜色
                }},
            ],
            yAxis: [
              { type: 'value', gridIndex: 0,axisLabel: { show: false } },
            ],
            series: [
              { 
                name: '市场部客户数', 
                type: 'line', 
                xAxisIndex: 0, 
                yAxisIndex: 0, 
                data: res.data.rs.map(item => ({
                  value: item.scb_khnums,
                  name: item.rq,
                  extraInfo:"<span style='color:blue;'>时间: "+item.rq+"<br />"+
                  "市场部客户占比："+Number(Math.abs(item.rate)).toFixed(2)+"%<br />"+
                  "市场部客户数："+item.scb_khnums+"<br />"+
                  "销售部客户数："+item.xsb_khnums+"</span>",
                })),
                itemStyle: { color: '#5470c6' },
                label: {
                  show: true,
                  position: 'top',        // top / inside / insideTop ...
                  formatter: '{c}',       // {c} 即当前值
                  fontSize: 9,
                  color: '#333'
                }
              },
              { 
                name: '销售部客户数', 
                type: 'line', xAxisIndex: 0, 
                yAxisIndex: 0, 
                data: res.data.rs.map(item => ({
                  value: item.xsb_khnums,
                  name: item.rq,
                  extraInfo:"<span style='color:blue;'>时间: "+item.rq+"<br />"+
                  "市场部客户占比："+Number(Math.abs(item.rate)).toFixed(2)+"%<br />"+
                  "市场部客户数："+item.scb_khnums+"<br />"+
                  "销售部客户数："+item.xsb_khnums+"</span>",
                })),
                itemStyle: { color: 'orange' },
                label: {
                  show: true,
                  position: 'top',        // top / inside / insideTop ...
                  formatter: '{c}',       // {c} 即当前值
                  fontSize: 9,
                  color: '#333'
                }
              },
              { 
                name: '市场部客户占比', 
                type: 'bar', 
                xAxisIndex: 0, 
                yAxisIndex: 0, 
                data: res.data.rs.map(item => ({
                  value: item.rate,
                  name: item.rq,
                  extraInfo:"<span style='color:blue;'>时间: "+item.rq+"<br />"+
                  "市场部客户占比："+Number(Math.abs(item.rate)).toFixed(2)+"%<br />"+
                  "市场部客户数："+item.scb_khnums+"<br />"+
                  "销售部客户数："+item.xsb_khnums+"</span>",
                })),
                itemStyle: { color: '#95AE5B' },
                barWidth: barWidth,
                label: {
                  show: true,
                  position: 'bottom',        // top / inside / insideTop ...
                  formatter: function (params) {
                    // params.value 就是原始值（可能为负）
                    return Math.abs(params.value)+"%";
                  },
                  fontSize: 9,
                  color: '#333'
                }
              }
            ]
          };
          chart2.setOption(option2);
        })
      },
    }
}
</script>